<template>
  <div>
    <a-card :bordered="false" class="mb10 searchCard">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="horizontal" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="文件名" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" >
              <!--<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>-->
              <j-input
                placeholder="请输入文件名"
                v-model="queryParam.fileName"
              ></j-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="12">
            <a-form-item label="拓展名" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" >
              <j-input
                placeholder="请输入拓展名"
                v-model="queryParam.ext"
              ></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="创建时间" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
              <a-range-picker style="width: 100%" @change="onChange"/>
            </a-form-item>
          </a-col>
          <span style="float: left; overflow: hidden;padding-left: 50px;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
        </a-row>
      </a-form>
    </div>
    </a-card>
    <a-card :bordered="false" class="mb10 searchCard">
    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
       <a-upload
        name="file"
        :multiple="false"
        :headers="headers"
        :action="uploadAction"
        :showUploadList="false"
        @change="handleChange">
        <a-button type="primary">
          <a-icon type="upload"/>
          文件上传
        </a-button>
      </a-upload>
      <!--<j-upload :showUploadList="false" @change="reload"></j-upload>-->

      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1">
            <a-icon type="delete" @click="batchDel" />
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
        style="font-weight: 600"
      >{{ selectedRowKeys.length }}</a
      >项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        bordered
        rowKey="fileId"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        @change="handleTableChange"
      >
         <span slot="action" slot-scope="text, record">
          <a @click="preview(record)">预览</a>
             <a-divider type="vertical" />
          <a @click="download(record)">下载</a>
           <a-divider type="vertical" />
           <a @click="del(record)">删除</a>
        </span>

        <span slot="fileName" slot-scope="text">
          <j-ellipsis :value="text" :length="20" />
        </span>

      </a-table>



    </div>
    <previewSysFile ref="previewSysFile" @previewImg="previewImg" ></previewSysFile>
    <k-img-previewer :image="image" ref="imgPreviewer" @getViewer="getViewer"></k-img-previewer>
  </a-card>
  </div>
</template>

<script>
  import moment from "moment";
  import {KsListMixin} from '@/mixins/KsListMixin'
  import JInput from "@/components/ksource/JInput";
  import {downloadSysFile} from '@/api/system'
  import previewSysFile from "@/components/file/KPreviewSysFile";
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import JEllipsis from "@/components/ksource/JEllipsis";
  import KImgPreviewer from '@comp/file/KImgPreviewer'


  export default {
    name: "SysFileList",
    mixins: [KsListMixin],
    components: {
      KImgPreviewer,
      JInput,
      previewSysFile,
      JEllipsis
    },
    data() {
      return {
        uploadAction:window._CONFIG['domianURL']+"/file/sysFile/uploadFile",
        headers:{},
        showUploadList:false,
        defaultFileList: [],
        //描述
        description: "系统附件展示页面",
        //查询参数
        queryParam: {},
        //数据展示列
        columns: [
          {
            title: "文件名",
            width: 150,
            dataIndex: 'fileName',
            scopedSlots: {customRender: 'fileName'},
          },
          {
            title: "拓展名",
            dataIndex: "ext",
            width: 100,
            sorter: true,
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            width: 120,
            sorter: true,
            customRender: (text) => {
              return moment(text).format("YYYY-MM-DD");
            },
          },
          {
            title: "大小",
            dataIndex: "totalBytes",
            width: 120,
            sorter: true,
            customRender: (text) => {
              if(text==null || text==''){
                return '';
              }
              return parseFloat(text/1024).toFixed(2)+'KB'
            },
          },
          {
            title: "上传者",
            dataIndex: "creator",
            width: 120
          },
          {
            title: "操作",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            align: "center",
            width: 170,
          },
        ],
        url: {
          list: "/file/sysFile/list",
          deleteBatch: "/file/sysFile/del",
        },
        image: '',
        viewer: null,
      };
    },
    methods: {
      getViewer(viewer) {
        if (this.viewer) {
          this.$nextTick(() => {
            viewer.show();
          });
        } else {
          this.viewer = viewer;
        }
      },
      previewImg(image) {
        this.image = image;
      },
      onChange(date, dateString) {
        this.queryParam.begincreatetime = date[0];
        this.queryParam.endcreatetime = date[1];
      },
      handleMenuClick(e) {
        if (e.key == 1) {
          this.batchDel();
        }
      },
      reload(){
        this.loadData();
      },
      handleChange(info) {
        //点击上传后的操作
        if (info.file.status === 'done') {
          //此处：info.file.response.sysFile 可以打印后台返回的数据fileId: fileName:  filePath: 等
          console.log('info.file.response.sysFile',info.file.response.sysFile)
          if (info.file.response.success) {
            //返回成功
            this.loadData();
            this.$message.success(`${info.file.name} 上传成功!`);
          } else {
            this.$message.error(`${info.file.response.message}`);
          }
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.response.message}`);
        }
      },
      del(record){
        this.selectedRowKeys=[];
        this.selectedRowKeys.push(record.fileId);
        this.batchDel();
        this.selectedRowKeys=[];
      },
      download(record){
        console.log(record)
        let param={};
        param.fileId=record.fileId;
        downloadSysFile(record.fileName,param).then(res=>{
          console.log(res)
        })
      },
      preview(record){
        this.$refs.previewSysFile.showFile(record.fileName,record.fileId,record.ext);
      }
    },
    created(){
      const token = Vue.ls.get(ACCESS_TOKEN);
      //---------------------------- begin 图片左右换位置 -------------------------------------
      this.headers = {"X-Access-Token":token};
      this.containerId = 'container-ty-'+new Date().getTime();
      //---------------------------- end 图片左右换位置 -------------------------------------
    },
  };
</script>

